<template>
  <div class="welcome-page">
    <div class="content-wrapper">
    <McIntroduction
      :logo-img="GlobalConfig.logoPath || Logo2X"
      :title="GlobalConfig.title"
      :sub-title="GlobalConfig.subTitle"
      :description="[$t('welcome.description1'), $t('welcome.description2')]"
      class="welcome-introduction"
    ></McIntroduction>
    <div class="sample-questions">
      <div class="sample-title">示例问题</div>
      <div class="sample-content">
        <span v-for="(item, index) in sampleQuestions" :key="index" @click="onSampleClick(item)">{{ item }}</span>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import GlobalConfig from '@/global-config';
import { useLangStore, useChatMessageStore } from '@/store';
import Logo2X from '../../../public/logo2x.svg';

const langStore = useLangStore();
const chatMessageStore = useChatMessageStore();

const sampleQuestions = [
  '高中数学：如何理解二次函数的顶点与开口方向？',
  '英语语法：现在完成时与一般过去时的区别是什么？',
  '职业技能：网络抓包分析 HTTP 三次握手的关键点',
  '编程训练：用示例解释二分查找的边界处理',
];

const onSampleClick = (q: string) => {
  chatMessageStore.ask(q);
};

</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.welcome-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .content-wrapper {
    margin: auto 0;
    width: 100%;
    gap: 24px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    }
  overflow: auto;
  width: 100%;
  max-width: 1280px;
  padding: 0 12px;
  gap: 24px;

  .welcome-introduction {
    :deep() {
      .mc-introduction-description {
        font-size: var(--devui-font-size, 14px);
      }
    }
  }

  .sample-questions {
    width: 100%;
    padding: 24px;
    border-radius: 24px;
    background-color: $devui-base-bg;
    .sample-title {
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      color: $devui-text;
      margin-bottom: 16px;
    }
    .sample-content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      span {
        font-size: $devui-font-size;
        color: $devui-aide-text;
        padding: 10px 16px;
        border-radius: $devui-border-radius-full;
        background-color: $devui-dividing-line;
        cursor: pointer;
      }
    }
  }
}
</style>
